<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>舆情预测</title>
    
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<!-- <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> -->
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
	<script src="/ruoyi/module/yuQing/yuQing6.js" th:src="@{/ruoyi/module/yuQing/yuQing6.js}"></script>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div class="wrapper wrapper-content">
       <div class="btn-group hidden-xs" role="group">
			<button type="button" class="btn btn-outline btn-default" th:onclick="'javascript:batchRemove()'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon glyphicon-text-height">关键词：</i>
	        </button>
			<button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/forecastjiao'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">高校教育</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/forecast'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">双一流</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/forecastxue'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">高校学生</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/forecastan'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">高校安全</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/forecastyu'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">高校娱乐</i>
	        </button>        
        </div>
</div>
<div class="wrapper wrapper-content">
	<div class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>舆情预测热度趋势分析</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode"></div>
                  </div>
<script>
$.getJSON('/ruoyi/forecastyu.js', function(data) {
  var ds = new DataSet();
  var dv1 = ds.createView().source(data);
  dv1.transform({
    type: 'map',
    callback: function callback(row) {
      row.Deaths = parseInt(row.Deaths);
      row.num = parseInt(row.Num);
      row.death = row.Deaths;
      return row;
    }
  });
  var dv2 = ds.createView().source(dv1.rows);
  dv2.transform({
    type: 'regression',
    method: 'polynomial',
    fields: ['num', 'death'],
    bandwidth: .1,
    //extent: [0, 4],
    as: ['num', 'death']
  }); 
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight-400,
    padding: [20, 20, 50, 50]
  });
  chart.tooltip({
    crosshairs: false
  });
  var view1 = chart.view();
  view1.source(dv1,{
    Deaths: {
    	alias: '热度值' // 设置属性的别名
	    }	  
  });
  view1.axis('Year', {
    subTickCount: 3,
    subTickLine: {
      length: 3,
      stroke: '#bfbfbf',
      lineWidth: 1
    },
    tickLine: {
      length: 6,
      lineWidth: 1,
      stroke: '#bfbfbf'
    },
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  view1.axis('Deaths', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      }
    }
  });
  view1.line().position('Year*Deaths');
  var view2 = chart.view();
  view2.axis(false);
  view2.source(dv2);
  view2.line().position('num*death').style({
    stroke: '#969696',
    lineDash: [3, 3]
  }).tooltip(false); 
  //add guide
  view1.guide().text({
    content: '趋势线',
    position: ['2017-10-01', 6000],
    style: {
      fill: '#8c8c8c',
      fontSize: 14,
      fontWeight: 300
    },
    offsetY: -70
  });
  chart.render();
});
</script>
             </div>
         </div>
     </div>
    </div>
<head th:include="include :: header"></head>
<div class="wrapper wrapper-content">
        <div class="btn-group hidden-xs row" id="tableToolbar" role="group">
        </div>
        <table class="bootstrap-table" data-mobile-responsive="true">
        </table>
    </div>
    <div th:include="include :: footer"></div>

<script th:inline="javascript">
        var editFlag = [[${@permissionService.hasPermi('module:yuQing:edit')}]];
        var removeFlag = [[${@permissionService.hasPermi('module:yuQing:remove')}]];
    </script>
</body>
</html>
